<template>
  <div class="app-container">
    <div class="page_header">订单测试下单</div>
    <el-col :span="12">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
        <el-form-item label="用姓名" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入姓名" :maxlength="10" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input v-model="formData.phoneNumber" placeholder="请输入联系方式" :maxlength="20" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="预估面积" >
          <el-input v-model="formData.estimatedArea" placeholder="请输入预估面积" :maxlength="20" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="areaAddress">
          <CityPicker @change="handleChange" ref="cityPicker" size="small" clearable placeholder="请选择省、市、区" v-model="formData.areaAddress" />
        </el-form-item>
        <el-form-item v-if="areaPriceShow">
          <div style="color: red">
            当前订单需支付定金{{areaPrice}}元
          </div>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" :maxlength="50" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="预约时间" prop="orderDate">
          <el-date-picker
            v-model="formData.orderDate"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :style="{width: '100%'}"
            placeholder="请选择预约时间"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="orderRemark">
          <el-input v-model="formData.orderRemark" placeholder="备注" :maxlength="50" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" :disabled="pending" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
  import CityPicker from '@/components/cityPicker'
  import {addOrder,areaPrice} from '@/api/test/order'
export default {
  name: 'Addorder',
  components: {
    CityPicker
  },
  data() {
    return {
      formData: {
        areaAddress:[],
        userName:'',
        phoneNumber:'',
        address:'',
        userProvince:'',
        userCity:'',
        userArea:'',
        orderDate:'',
        orderRemark:'',
        estimatedArea:''
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: 'change'
          }
        ],
        areaAddress: [
          {
            required: true,
            type: 'array',
            message: '请选择省市区',
            trigger: 'change'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ]
    },
      pending: false,
      areaPriceShow:false,
      areaPrice:'0'
  }},
  computed: {
    resourceId() {
      return this.$route.query.resourid
    }
  },
  async created() {
  },
  async mounted() {
    if (this.$refs['elForm'] !== undefined) {
      this.$refs['elForm'].resetFields();
    }
  },
  methods: {
    handleChange(row){
      const cityObj =  this.$refs.cityPicker.getValueTextObj(this.formData.areaAddress)

      this.loadAreaPrice({...cityObj,headers:[]});
    },
    async loadAreaPrice(cityObj){
      const res = await areaPrice(cityObj);
      this.areaPriceShow=true;
      if(res.data){
        this.areaPrice=res.data.amount;
      }else{
        this.areaPrice='0';
      }

    },
    submitForm() {
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return

        this.pending = true
        try {
          const cityObj = this.$refs.cityPicker.getValueTextObj(this.formData.areaAddress)
          this.formData.userProvince=cityObj.province;
          this.formData.userCity=cityObj.city;
          this.formData.userArea=cityObj.area;
          const res = await addOrder({
            ...this.formData,
            sourceId:'ZJ_UEOIRJKDFJDKL'
          })
          if (res.code === 200) {
            this.msgSuccess("订单创建成功，等待支付...")
          }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$refs['url'].clearFiles()
    }
  }
}
</script>


